<template>
  <section v-if="tacticsList && tacticsList.length>0">
    <div style="display: flex;flex-direction: row;align-items: center">
      <h3 style="margin-right: 10px">已选指标 ▶</h3>
      <el-tag size="middle" v-for="indexCheck in selIndexs" :key="indexCheck.id" closable class="tag-box" @close="delTag(indexCheck)">
        {{indexCheck.name}}
      </el-tag>
    </div>
    <div style="display: flex;flex-direction: row">
      <div class="collapse-list">
        <h3>策略列表 ▼</h3>
        <el-collapse v-model="activeNames" class="collapse-box">
          <el-collapse-item :title="tactics.name" :name="tactics.id"  v-for="tactics in tacticsList" :key="tactics.id">
            <el-tree :data="tactics.indexList" node-key="id" default-expand-all class="tree-box"
                     :expand-on-click-node="false" :props="defaultProps">
              <div class="custom-tree-node" slot-scope="{ node, data }">
                <div style="font-size: 15px;font-weight: bold">
                  <span> {{ data.name }}</span>
                </div>
                <span style="color: #8b8b8b;">
                  <span >{{ data.description }}</span>
                </span>
                <span >
                  <i class="el-icon-check" @click="check(data)"  />
                </span>
              </div>
            </el-tree>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div>
        <h3>业务列表 ▼</h3>
        <div v-if="ableList" class="able-list">
          <el-checkbox-group v-model="selAbleList">
            <el-checkbox v-for="able in ableList" :key="able.id" :label="able.id" @change="selBusiness($event,able.id)">{{able.title}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="confirmManual" v-if="confirmManual" title="确认" append-to-body>
      <el-switch></el-switch>
    </el-dialog>
  </section>
  <section v-else>
    当前检测无策略
  </section>
</template>

<script>
  import choiceIndexs from './business/choiceIndexs'
  import getIndexs from '@/common/getIndexs'
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  export default {
    name: "choiceBus",
    props:['detectionId'],
    components:{choiceIndexs},
    data(){
      return{
        activeNames:'',
        instanceList:null,
        tacticsList:null,
        toPushList:[],
        defaultProps:{
          children: 'childrens',
          label: 'id'
        },
        selIndexs:[],
        selAbleList:[],
        ableList:null,
        confirmManual:false
      }
    },
    watch:{
      detectionId(nv,ov){
        if(nv) this.init(nv)
      },
      selIndexs(nv,ov){
        console.log('selIndexs-----',nv)
        this.getIndexString(nv)
      }
    },
    created(){
      this.init(this.detectionId)
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      init(id){
        this.selAbleList=[]
        this.getDetectionBusinessList(id)//获取当前检测已经关联的业务表
        this.getDetection(id)//获取当前检测
      },
      getDetectionBusinessList(detectionId){
        this.fetch({name:"getDetectionBusinessList",data:{detectionId}})
          .then(res=>{
            console.log('检测关联的业务表-------',res)
            if(res.length <=0) return
            res.forEach(r=>{
              this.selAbleList.push(r.id)
            })
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getDetection(id){
        this.fetch({name:"getDetection",data:{id}})
          .then(res=>{
            console.log('获取当前检测-------',res)
            this.instanceList=[]
            console.log(res.detectionItems)
            if(res.detectionItems.length <= 0) return
            this.getInstance(JSON.parse(JSON.stringify(res.detectionItems)))//获取检测内的实例
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getInstance(items){
        this.fetch({name:"getInstance",data:{instanceId:items[0].instanceId}})
          .then(res=>{
            console.log('获取实例-------',res)
            if(res.data.tacticsId) {
              this.instanceList.push(res)
            }

            items.splice(0, 1)
            if (items.length > 0) this.getInstance(items)
            else {
              console.log('全部加载完-----', this.instanceList)
              this.tacticsList = []
              if(this.instanceList.length <=0) return
              this.getTactics(this.instanceList)//获取实例
              this.getIndexList(this.instanceList)//获取实例内指标
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getTactics(instances){
        this.fetch({name:"getTactics",data:{id:instances[0].data.tacticsId}})
          .then(res=>{
            if(this.toPushList.length>0){
              for(let i=0;i<this.toPushList.length;i++){
                let tp=this.toPushList[i]
                if(tp.id === res.id){
                  res.indexList=tp.indexList
                  break
                }
              }
              this.toPushList=[]
            }
            this.tacticsList.push(res)
            instances.splice(0,1)
            if(instances.length >0) this.getTactics(instances)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getIndexList(instances){
        this.fetch({name:"getTacticsIndexList",data:{tacticsId:instances[0].data.tacticsId}})
          .then(res=>{
            let index = this.tacticsList.findIndex(t=>t.id === res.tacticsId)
            if(index>0) this.tacticsList[index].indexList=res
            else this.toPushList.push({id:instances[0].data.tacticsId,indexList:res})
            // this.tacticsList.push(res)
            instances.splice(0,1)
            if(instances.length >0) this.getIndexList(instances)
            else {
              console.log('策略指标加载完-----',this.toPushList)
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      delTag(tag){
        let index = this.selIndexs.findIndex(t=>t.id === tag.id)
        if(index >=0 ) this.selIndexs.splice(index,1)
        else this.$message({type:'error',message:'不存在或已删除，请刷新！'})
      },
      getIndexString(array){
        let tmp=[]
        array.forEach(a=>{
          tmp.push(a.id)
        })
        // tmp=tmp.join('|')
        console.log(tmp)
        setTimeout(()=>{
          this.getBusList(JSON.stringify(tmp))
        },1000)
      },
      getBusList(tacticsIndexIds){
        this.fetch({name:"getDetectionBusinessList",data:{tacticsIndexIds}})
          .then(res=>{
            console.log('获取可关联列表-------',res)
            this.ableList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      setDetectionBusiness(data){
        this.fetch({name:"setDetectionBusiness",data:{detectionId:this.detectionId,...data}})
          .then(res=>{
            console.log('设置完毕-------',res)
            this.$message({type:'success',message:'设置完毕!'})
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      selBusiness(e,id){
        console.log('有没有？',e)
        let data={detectionBusinessId:id}
        let type
        let manual=true
        if(e) {
          data.type=1
          data.manual=manual
        }
        else data.type=2
        console.log('看看data-----',data)
        return
        this.setDetectionBusiness(data)
      },

      check(data){
        // this.selIndexs.push
        console.log('check------',data)
        let index = this.selIndexs.findIndex(t=>t.id === data.id)
        if(index >=0 ) this.selIndexs.splice(index,1)
        else this.selIndexs.push(data)
      },
    }
  }
</script>

<style scoped>
  .collapse-box{
    width: 200px;
    border: 1px solid #eee;
    text-align: center;
    padding: 0 10px;
  }
  .tag-box{
    margin: 0 3px;
  }
  .collapse-list, .able-list{
    display: flex;
    flex-direction: column;
    width: 50%;
  }
  .custom-tree-node{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: space-between;
    width: 80%;
  }
  .tree-box{
    margin: 10px;
  }
</style>
